<template>
  <el-main>
    <div class="con1_box">
      <div>
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="员工编号">
                <!-- v-model="form.epmID" -->
                <el-input v-model="form.empId" placeholder="请输入员工编号" clearable />
              </el-form-item>
              <el-form-item label="员工姓名">
                <el-input v-model="form.name" placeholder="请输入员工姓名" clearable />
              </el-form-item>
              <el-form-item label="是否启用" style="width: 180px;">
                <el-select v-model="form.is_enable" clearable placeholder="请选择" @change="statusChange()">
                  <el-option key="是" label="是" value="是" />
                  <el-option key="否" label="否" value="否" />
                </el-select>
              </el-form-item>
              <el-form-item label="入职日期" class="date_picker">
                <!-- <el-date-picker
                  v-model="form.hire_date"
                  type="daterange"
                  clear
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker> -->
                <el-date-picker v-model="form.hire_date[0]" type="date" placeholder="开始时间" />&nbsp;至&nbsp;
                <el-date-picker v-model="form.hire_date[1]" type="date" placeholder="结束时间" />
              </el-form-item>
              <el-form-item label="所属部门">
                <el-select v-model="form.deptName" clearable placeholder="请选择部门">
                  <el-option
                    v-for="item in dept"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
                <!-- <el-input v-model="form.deptName" placeholder="请输入员工所属部门" clearable></el-input> -->
              </el-form-item>

            </el-col>
            <el-col><el-button type="primary" icon="el-icon-search" style="margin-bottom: 20px;" @click="searchData">搜索</el-button></el-col>
          </el-row>
        </el-form>
        <!-- :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize) -->
        <el-table
          v-loading="loading"
          :data="tableData.staffList"
          :stripe="stripe"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          :default-sort="{ prop: 'hire_date', order: 'descending' }"
          :current-page.sync="currentPage"
          border
          sortable
        >
          <el-table-column fixed="left" type="selection" width="60" />
          <el-table-column prop="empId" label="员工编号" width="150" />
          <el-table-column prop="name" label="员工姓名" width="150" />
          <el-table-column prop="deptName" label="所属部门" width="200" />
          <el-table-column prop="birth_date" label="出生日期" width="150" />
          <!-- 方式一 prop="date" -->
          <el-table-column prop="hire_date" label="入职日期" width="150" sortable />
          <!-- 方式二 gender-->
          <!-- <el-table-column label="入职日期" width="150" sortable>
            <template slot-scope="{row}">
              <span>{{ row.hire_date }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="address" label="家庭地址" />
          <!-- <el-table-column prop="is_enable" label="是否启用"></el-table-column> -->
          <el-table-column
            prop="is_enable"
            label="是否启用"
            width="100"
            :filters="[{ text: '是', value: '是' }, { text: '否', value: '否' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.is_enable === '是' ? 'success' : 'danger'"
                disable-transitions
              >{{ scope.row.is_enable }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="状态"
            width="100"
            style="text-align: center;"
            :filters="[{ text: '在职', value: '在职' }, { text: '离职', value: '离职' }]"
            :filter-method="filterType"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.type === '在职' ? 'success' : 'danger'"
                disable-transitions
              >{{ scope.row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <!-- <router-link :to="{ path: '/preview', query: { Id: scope.row.id } }" target='_blank' title="预览">
                <el-button type="primary" size="mini" icon="el-icon-view"></el-button>
              </router-link> -->
              <!-- <router-link :to="'/articletest/edit1/' + scope.row.id"> -->
              <router-link :to="{ path: '/emp/edit', query: { Id: scope.row.empId, type: 'edit' } }" title="编辑">
                <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px;" />
              </router-link>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                style="margin-left: 10px;"
                title="删除"
                @click="delContent(scope.row.id)"
              />
            </template>

          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        small
        :hide-on-single-page="show"
        :page-sizes="[10, 20, 50]"
        :page-size="tableData.pagesize"
        :current-page.sync="currentPage"
        layout="total,sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-main>
</template>
<script>
//  引入左侧菜单组件
import { getStaffList } from '@/api/newUsertest'
export default {
  components: {},
  data() {
    return {
      loading: false,
      // direction: 'ltr',
      input3: '', // 搜索关键词
      select: '', // 下拉框选择
      stripe: true, // 是否为斑马纹 table
      // 页码
      currentPage: 1,
      pagesize: 10,
      total: 0,
      // tableData: Array(50).fill(item),
      show: false,
      needTagsView: true, // 标签是否显示
      fixedHeader: false,
      screenWidth: null, // 屏幕宽度

      activeTabs: 'all', // tabs

      columnActive: '/',
      // 模拟列表数据
      tableData: [],
      dept: [{
        value: '0',
        label: '行政办公室'
      },
      {
        value: '1',
        label: '人力资源部'
      },
      {
        value: '2',
        label: '工会办公室'
      },
      {
        value: '3',
        label: '安全监察'
      },
      {
        value: '4',
        label: '质控管理部'
      },
      {
        value: '5',
        label: '信息技术部'
      },
      {
        value: '6',
        label: '数智企业部'
      }
      ],
      // 搜索字段
      form: {
        empId: '', // 搜索输入的值 姓名
        name: '', // 搜索输入的值 所属单位
        deptName: '', // 部门名称
        is_enable: '',
        hire_date: [] // 入职日期
      }

    }
  },
  computed: {

  },
  watch: {
    screenWidth: {
      handler: function(val) {
        // if (val < 450) {
        //   console.log(val+'屏幕宽度小于900px')
        //   this.pagecount=5
        // } else {
        //   this.pagecount=7
        // }
      },
      immediate: true,
      deep: true
    }
  },

  mounted() { // 挂载后
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.GetList()
    },
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.GetList()
    },
    // 员工账号是否启用
    filterTag(value, row) {
      return row.is_enable === value
    },
    // 员工状态
    filterType(value, row) {
      return row.type === value
    },
    // 查询数据
    statusChange() {
      console.log(this.form.is_enable)
      // this.getNoticeList()
    },
    // 获取列表数据
    GetList() {
      // debugger;
      // if (JSON.parse(localStorage.getItem("columnKeyObj")).pageKey == "ds_HYWJ_YGTH"&&this.activeTabs == 'all') {
      //     this.columnActive = JSON.parse(localStorage.getItem("columnKeyObj")).pageKey;
      //     this.tableData = this.tableData1
      // } else{
      this.loading = true
      const params = {
        key: this.input_name,
        pageSize: 10,
        currentPage: this.currentPage,
        form: this.form
      }
      getStaffList({ params }).then(res => {
        if (res.code == 20000) {
          this.tableData = res.data
          this.currentPage = res.data.pagenum
          this.loading = false
        }
      })
    },

    // 查看
    handleClick(res) {
      console.log(res)
      const h = this.$createElement
      this.$msgbox({
        title: '查看',
        center: true,
        message: h('div', { style: 'text-align: left;' }, [
          h('p', null, [
            h('span', null, '日期: '),
            h('span', { style: 'color: teal;margin-left:20px;' }, res.date)
          ]),
          h('p', { style: 'margin-top:10px;' }, [
            h('span', null, '姓名: '),
            h('span', { style: 'color: teal;margin-left:20px;' }, res.name)
          ]),
          h('p', { style: 'margin-top:10px;' }, [
            h('span', null, '地址: '),
            h('span', { style: 'color: teal;margin-left:20px;' }, res.address)
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '导出',
        cancelButtonText: '关闭',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 3000)
          } else {
            done()
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        })
      }).catch(action => {

      })
    },
    // 编辑
    editTap(res) {
      debugger
      const routerData = this.$router.resolve('/test/edit/' + res.id)
      window.open(routerData.href, '_blank')
    },
    // 删除
    deleteRow(index, rows) {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索
    searchData() {
      this.loading = true
      this.GetList()
      // const search = this.input_name;
      // const search2 = this.input_unit;
      // debugger;
      //   if(search!==''){
      //     this.tableData=this.tableData.filter((dataNews) => {
      //       return Object.keys(dataNews).some((key) => {
      //         return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
      //       });
      //     })

      //   }
      //   if(search2!==''){
      //     this.tableData=this.tableData.filter((dataNews) => {
      //       return Object.keys(dataNews).some((key) => {
      //         return String(dataNews[key]).toLowerCase().indexOf(search2) > -1;
      //       });
      //     })

      //   }
      //   if(search==''&&search2==''){
      //       this.tableData = this.tableData1
      //   }
      //   setTimeout(() => {
      //       this.loading = false;
      //     }, 500);
    }

  }
}
</script>
<style>
.cell {
  white-space: nowrap !important;
}

.el-drawer {
  display: block;
  min-width: 200px !important;
}

.el-drawer__body {
  overflow: hidden;
}
.date_picker {
  white-space: nowrap;
  width: 545px !important;
}
@media(min-width:1200px) {
  .el-drawer {
    display: none;
  }
}
@media(max-width:588px) {
  .date_picker {
    white-space: normal;
    text-align:center;
  }
}
@media(max-width:450px) {
  .el-main {
    padding: 10px;
  }
}

</style>
<style scoped lang="scss">
.el-scrollbar__wrap {
  overflow: hidden;
}

.con1_box {
  text-align: right;
}

.el-popper {
  margin-top: 0;
}

.el-form {
  .el-form-item {
    float: left;
    width: 300px;
  }
}

.el-input-group {
  width: 100%;
}

.pagination {
  margin-top: 30px;
}

.hidden-lg-and-up .el-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 20px;
}

.hidden-lg-and-up .el-button:hover {
  color: unset;
}

.mobile_nav>.el-menu {
  width: 200px;
  background-color: #fff;
  box-shadow: 1px 2px 3px #000;
  text-align: left;
}

@media screen and (max-width:1200px) {
  .el-main {
    width: 100%;
  }

  .menu_box {
    height: 100%;
  }

}
</style>
